<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="classifyAddWinDialogVisible"
      title="添加分类"
      width="40%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newClassify"  label-width="auto">

        <el-row v-if="parentClassify">
          <el-col>
            <el-form-item label="父分类" style="font-weight: bold">
              <el-select v-model="parentClassify.classifyName"  disabled>
                <el-option label="parentClassify.classifyName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item  style="float: left;font-weight: bold" label="分类名称">
          <el-input style="width: 220px" v-model="newClassify.classifyName"/>
        </el-form-item>


        <el-row style="margin-left: 330px;font-weight: bold">
          <el-col>
            <el-form-item label="显示排序">
              <el-input-number style="width: 220px" min="1" v-model="newClassify.classifyOrder"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="float: left;font-weight: bold" label="物料/产品">
          <el-radio-group v-model="newClassify.classifyType">
            <el-radio :label=1>物料</el-radio>
            <el-radio :label=2>产品</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="margin-left: 330px;font-weight: bold" label="启用状态">
          <el-radio-group v-model="newClassify.classifyStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelnewClassify">取消</el-button>
        <el-button type="primary" @click="newClassifySubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import classifyRequest from "@/api/classify.js";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelClassifyAdd'])
// 弹窗标记
let classifyAddWinDialogVisible = ref(false);

let props = defineProps(["parentClassify","isShow"]);
// 编辑的项目对象
let newClassify = ref({classifyStatus:1})

/**
 * 取消新增按钮事件
 */
function cancelnewClassify(){
  newClassify = ref({classifyStatus:1})
  classifyAddWinDialogVisible.value = false;
  emits("cancelClassifyAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  cancelnewClassify();
  emits("cancelClassifyAdd")
}

/**
 * 新增提交
 */
function newClassifySubmit(){
  if(props.parentClassify){
    newClassify.value.classifyParentId = props.parentClassify.classifyId;
  }
  classifyRequest.save(newClassify.value,res=>{
    if(res.code === 200){
      ElMessage({
        type:"success",
        message:"新增分类成功"
      });
      // 关闭弹窗
      cancelnewClassify();
      // 触发编辑完成的事件
      emits('addComplete',res.data);
    }else if (res.code === 300) {
      ElMessage({
        type:"warning",
        message:"分类名称重复"
      });
    } else if (res.data == '分类名称不能为空') {
      ElMessage({
        type:"warning",
        message:"分类名称不能为空"
      });
    } else if (res.data == '排序不能为空') {
      ElMessage({
        type:"warning",
        message:"排序不能为空"
      });
    } else if (res.data == '分类是物料还是产品选其一') {
      ElMessage({
        type:"warning",
        message:"分类是物料还是产品选其一"
      });
    } else {
      ElMessage({
        type:"warning",
        message:"新增分类失败"
      });
    }
  })
}

/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  classifyAddWinDialogVisible.value = props.isShow;
});


onMounted(()=>{
})
</script>
<style scoped>

</style>